<template>
  <view v-model="goods">
    <u-navbar :border-bottom="false" back-icon-color="#fff" title="商品详情" title-color="#fff"
      :background="{backgroundColor: '#E7240C'}">
      <!-- <view class="u-f1" style="text-align: right;" slot="right">
        <u-button type="error" size="mini" :custom-style="customStyle" @click="showPopup=true">汇购预排</u-button>
      </view> -->
    </u-navbar>
    <image src="/static/images/goods/header.png" class="header_image" mode="widthFix"></image>
    <view class="goods-container">

      <view class="goods-container2">
        <!-- 轮播图 -->
        <view>
          <goods-swiper :list="gallery_list" :goods-video="goods_video" :autoplay="false" :circular="false" height="650"
            img-mode="aspectFit" mode="number" indicator-pos="bottomRight" @click="handlePreviewImage"></goods-swiper>
        </view>
        <!-- 拼团 -->
        <goods-assemble :assemble="assemble" :is_assemble="is_assemble" v-if="is_assemble"></goods-assemble>
        <!-- 团购、限时抢购 -->
        <goods-groupbuy-seckill :promotions="promotions" :selectedSku="selectedSku" v-else />
        <!-- 代金券兑换 -->
        <goods-exchange :promotions="promotions" />

        <!-- 商品基本信息 -->
        <view class="goods-base-view">
          <view class="base-price-view u-f-ac">
            <text class="goods-title text-overflow">{{goods.goods_name}}</text>
            <view class="u-flex">
              <!-- <view class="u-text-center u-m-r-30" @click="handleShare">
                              <u-icon name="fenxiang1" custom-prefix="custom-icon" size="40"></u-icon>
                              <view class="u-font-10">
                                  <text class="collection-text">分享</text>
                              </view>
                          </view> -->
              <view class="u-text-center" @click="handleCollect">
                <u-icon :class="collected ? 'collection-icon-selected' : ''" :name="collected ? 'heart-fill' : 'heart'"
                  size="40"></u-icon>
                <view class="u-font-10" style="margin-top: -6rpx;">
                  <text class="collection-text"> {{ collected ? '已收藏' : '收藏'}}</text>
                </view>
              </view>
            </view>
          </view>

          <view class="u-flex u-f-ac price_box" style="align-items: baseline;">
            <block v-if="!hiddenPrice && !is_assemble">
              <custom-price v-if="selectedSku && selectedSku.price" :price="selectedSku.price" :fontWeight="400"
                :textColor="'#fff'" :size="30"></custom-price>
              <custom-price v-else-if="goods && goods.price" :price="goods.price" :textColor="'#fff'" :fontWeight="400"
                :size="30"></custom-price>
              <view style="color: #fff;margin: 0 10rpx;font-weight: 700;">一口价</view>
              <!-- <custom-price v-if="goods.mktprice" :price="goods.mktprice" :textColor="'#ccc'" :fontWeight="600" :size="30" style="text-decoration: line-through;margin-left: 20rpx;"></custom-price> -->
              <view class="mktprice" style="color: #DEA15E;margin-left: 70rpx;" v-if="goods&&goods.mktprice">
                原价:￥{{goods.mktprice}}</view>
            </block>
          </view>

        </view>
        <!-- 补贴额度和促销 -->
        <!-- 补贴额度 -->
        <!-- 促销 -->
        <!-- <view class="discounts-view">
          <goods-coupons :goodsId="goods.goods_id" :selectedSku="selectedSku" v-if="!is_assemble" />
          <u-line color="#f3f4f6" />
          <goods-promotions :promotions="promotions" :selectedSku="selectedSku" />
        </view> -->

        <!-- 规格、参数 -->
        <view v-if="goods && goods.goods_id">
          <goods-specs :goods="goods" :promotions="promotions" :show="skuPopupShow" :sku_id="sku_id"
            :pintuan_id="pintuan_id" :from_nav="from_nav" @sku-changed="handleGetAssembleDetail"
            @num-changed="handleBuyNum" @add-cart="handleAddToCart" @buy-now="handleBuyNow" @close="handleskuPopup" />
        </view>

        <!-- 拼团订单 -->
        <goods-assemble-order :showPopup="false" :assembleOrder="assembleOrder" :assembleOrderAll="assembleOrderAll"
          @to-assemble-buy-now="toAssembleBuyNow" v-if="is_assemble && assembleOrder.length > 0"></goods-assemble-order>
        <!-- 评价 -->
        <goods-comments :goodsId="goods.goods_id" :grade="goods.grade" />

        <!-- 问答 -->
        <goods-ask :goodsId="goods.goods_id" />

        <!-- 店铺 -->
        <view v-if="goods.seller_id">
          <!-- <goods-seller :sellerId="goods.seller_id" ref="seller" /> -->
        </view>
      </view>

      <!-- 商品详情 -->
      <goods-params :mobile_intro="goods.mobile_intro" :paramList="goods.param_list" />

      <!-- 安全区 -->
      <view class="safe-view">
        <u-divider>到底了哦~</u-divider>
      </view>
    </view>

    <!-- 加入购物车 -->
    <view class="navigation">
      <view class="left-view">
        <!-- #ifdef MP-WEIXIN -->
        <button open-type="contact">
          <u-icon name="xiaoxi" custom-prefix="custom-icon" :size="40"></u-icon>
          <view class="text u-line-1">客服</view>
        </button>
        <!-- #endif -->
        <!-- #ifdef APP-PLUS || H5 -->
        <view class="item act" @click="handleChat">
          <u-icon name="xiaoxi" custom-prefix="custom-icon" :size="40"></u-icon>
          <view class="text u-line-1">客服</view>
        </view>
        <!-- #endif -->
        <view class="item car" @click="handleCart">
          <u-badge v-if="cartGoodsCount" class="car-num" :count="cartGoodsCount > 99 ? '99+' : cartGoodsCount"
            type="error" :offset="[-4, -8]"></u-badge>
          <u-icon name="gouwuche4" custom-prefix="custom-icon" :size="40"></u-icon>
          <view class="text u-line-1">购物车</view>
        </view>
      </view>
      <view class="right-view u-flex-1 u-flex" v-if="is_assemble">
        <view class="alone-buy btn u-line-1 u-flex-1" @click="handleBuyNow()">
          <text>{{ assemble.origin_price | unitPrice('￥') }}</text>
          <text>单独购买</text>
        </view>
        <view class="assemble-buy btn u-line-1 u-flex-1" @click="handleAssembleBuyNow()">
          <text>{{ assemble.sales_price | unitPrice('￥') }}</text>
          <text>{{ assemble.required_num }}人团</text>
        </view>
      </view>
      <view class="right-view u-flex-1 u-flex" v-else>
        <view class="cart btn u-line-1 u-flex-1" :class="goods.market_enable === 0?'disable':''"
          @click="handleAddToCart()">加入购物车</view>
        <view class="buy btn u-line-1 u-flex-1" :class="goods.market_enable === 0?'disable':''" @click="handleBuyNow()">
          立即购买</view>
      </view>
    </view>
    <!-- 分销 -->
    <goods-distribution ref="distribution" :show="disPopupShow" :goods_id="goods.goods_id"
      :goods_name="goods.goods_name" :goods_img="goods_img" :goods_price="goods.price" :promotions="promotions"
      @close="handleClose"></goods-distribution>
  </view>
</template>

<script>
  import * as API_Goods from '@/api/goods.js'
  import * as API_Trade from '@/api/trade.js'
  import * as API_Members from '@/api/members.js'
  import * as API_Common from '@/api/common.js'
  import * as API_Promotions from '@/api/promotions.js'
  import * as API_Distribution from '@/api/distribution.js'
  import * as API_Collection from '@/api/collection.js'
  import Cache, {
    Keys
  } from '@/utils/cache.js'
  import {
    domain,
    liveVideo
  } from '@/config/config.js'
  import goodsGroupbuySeckill from './-goods/-goods-groupbuy-seckill.vue'
  import goodsExchange from './-goods/-goods-exchange.vue'
  import goodsCoupons from './-goods/-goods-coupons.vue'
  import goodsPromotions from './-goods/-goods-promotions.vue'
  import goodsSpecs from './-goods/-goods-specs.vue'
  import goodsComments from './-goods/-goods-comments.vue'
  import goodsAsk from './-goods/-goods-ask.vue'
  import goodsParams from './-goods/-goods-params.vue'
  import goodsDistribution from './-goods/-goods-distribution.vue'
  import goodsSeller from './-goods/-goods-seller.vue'
  import goodsAssemble from './-goods/-goods-assemble.vue'
  import goodsAssembleOrder from './-goods/-goods-assemble-order.vue'

  export default {
    data() {
      return {
        /** 商品信息相关 */
        goods_id: 298, //商品id
        goods: {}, //商品详情信息
        gallery_list: [], //商品轮播图片
        goods_video: '', //商品视频
        /** 规格相关 */
        selectedSku: {}, //已选SKU
        selectedPromotionType: '', //已选SKU参与的活动
        skuPopupShow: false, //规格弹窗
        sku_id: '', // 路由加载参数中携带的sku_id
        buyNum: 1, // 所选商品数量
        collected: false, //收藏
        /** 促销信息 */
        promotions: [],
        cartGoodsCount: 0, //购物车数量
        disPopupShow: false, // 展示分销弹框
        su: '', //分销参数
        from: '', //二维码分销参数
        // 是否是拼团 默认不是
        is_assemble: false,
        pintuan_id: '', //拼团id
        // 拼团信息
        assemble: {},
        // 待成团订单信息
        assembleOrder: [],
        assembleOrderAll: [],
        from_nav: '',
        room_id: '', // 直播id
        goods_img: ''
      };
    },
    components: {
      goodsGroupbuySeckill,
      goodsExchange,
      goodsCoupons,
      goodsPromotions,
      goodsSpecs,
      goodsComments,
      goodsAsk,
      goodsParams,
      goodsDistribution,
      goodsSeller,
      goodsAssemble,
      goodsAssembleOrder
    },
    onLoad(options) {
      //解析获取到生成二维码时传入的 scene
      const scene = decodeURIComponent(options.scene)
      const sceneArr = scene.split("&")
      this.goods_id = options.goods_id || sceneArr[0] || ''
      this.sku_id = options.sku_id || ''
      this.pintuan_id = options.pintuan_id || ''
      this.from_nav = options.from_nav || ''
      this.su = options.su || ''
      this.from = sceneArr[1] || ''
      this.goodsDetail()
      // 如果存在sku_id 并且带有拼团标识
      if (options.sku_id && options.from_nav === 'assemble') {
        this.is_assemble = true
        this.pinTuanDetail(options);
      } else {
        this.getGoodsPromotions()
      }

      uni.getStorageSync(Keys.accessToken) && this.getAllCount()

      let pages = getCurrentPages() //获取加载页面
      let currentPage = pages[pages.length - 1] //获取当前页面的对象
      let url = currentPage.route + '/' + options.goods_id //获取当前页面路径
      API_Common.recordView(url) //记录浏览量统计
    },
    computed: {
      //是否隐藏价格
      hiddenPrice() {
        const {
          promotions = prom, selectedSku
        } = this
        if (!promotions || !promotions.length) return false
        // 如果有团购，隐藏价格
        let groupbuyGoodsVo = promotions.filter(item => item.groupbuy_goods_vo)[0]
        if (groupbuyGoodsVo && groupbuyGoodsVo.sku_id === selectedSku.sku_id) {
          return true
        }
        // 如果有限时抢购，隐藏价格
        let seckillGoodsVo = promotions.filter(item => item.seckill_goods_vo)[0]
        if (seckillGoodsVo && seckillGoodsVo.sku_id === selectedSku.sku_id) {
          return true
        }
        // 如果有代金券兑换，隐藏价格
        if (promotions.filter(item => item.exchange)[0]) {
          return true
        }

        return false
      }
    },
    //小程序分享
    onShareAppMessage() {
      const disParams = this.$refs.distribution.disParams
      this.$refs.distribution.disShow = false
      return {
        title: this.goods.goods_name,
        imageUrl: this.goods.thumbnail,
        path: `/goods-module/goods${disParams}`
      }
    },
    methods: {
      //拼团详情
      async pinTuanDetail(options) {
        await API_Promotions.getAssembleDetail(options.sku_id).then(res => {
          this.assemble = res
        });
        await API_Promotions.getAssembleOrderList(options.goods_id, {
          sku_id: options.sku_id
        }).then(res => {
          const orderList = res.map(key => {
            return {
              left_time: key.left_time,
              offered_num: key.offered_num,
              required_num: key.required_num,
              face: key.participants.map(item => {
                if (item.is_master === 1) {
                  return item.face
                }
              })[0],
              order_id: key.order_id,
              name: key.participants.map(item => {
                if (item.is_master === 1) {
                  return item.name
                }
              })[0]
            }
          })
          if (orderList && orderList.length) {
            for (let i = 0, len = orderList.length; i < len; i += 2) {
              this.assembleOrder.push(orderList.slice(i, i + 2))
            }
          }
          this.assembleOrderAll = orderList
        });
      },
      //商品详情
      goodsDetail() {
        API_Goods.getGoods(this.goods_id).then(res => {
          // 培训的课程 参数 全部删掉
          // if(res.category_id == '1423261228226052098') res.param_list = []
          this.goods = res;
          console.log('查看goods', res)
          // #ifdef H5
          API_Common.getBase64(res.thumbnail).then(base64 => {
            this.goods_img = 'data:image/jpg;base64,' + base64
          })
          // #endif
          //#ifndef H5
          //商品图片转换为https
          this.goods_img = res.thumbnail.replace(/http\:\/\//, 'https://')
          //#endif
          const img_list = [];
          if (res.gallery_list) {
            res.gallery_list.forEach(gallery => {
              // gallery.small = gallery.small.substring(0, gallery.small.indexOf('jpeg')+4)
              // gallery.small = gallery.small.replace('_400x400', '')
              const img = {
                // image: gallery.small
                image: gallery.original
              }
              img_list.push(img);
            })
          }
          this.gallery_list = img_list;
          this.goods_video = res.goods_video;
          //移动端详情
          if (res.mobile_intro) {
            this.goods.mobile_intro = JSON.parse(this.goods.mobile_intro)
          }
          // 如果页面是被分享的 则调用分销参数回传API
          this.su && API_Distribution.accessShortLink({
            su: this.su
          })
          // 如果页面是通过小程序码分享的 则存储分销的上级id
          this.from && API_Distribution.visitMiniprogramCode({
            from: this.from
          })
          uni.getStorageSync(Keys.accessToken) && this.getGoodsIsCollect();
          uni.$emit('goodsback')
        });
      },
      //sku变化
      handleGetAssembleDetail(sku) {
        if (this.is_assemble) {
          /** 查询获取某个拼团的sku详情 */
          const {
            sku_id
          } = sku
          API_Promotions.getAssembleDetail(sku_id).then(res => {
            this.assemble = res
          })
        }
        this.selectedSku = sku
        //设置已选SKU 参与的活动
        this.promotions.forEach(res => {
          if (res.sku_id === this.selectedSku.sku_id || res.goods_id == -1) {
            console.log("促销类型：" + res.promotion_type)
            this.selectedPromotionType = res.promotion_type
          }
        })
      },
      //分享
      handleShare() {
        this.judgeLogin(() => {
          this.disPopupShow = true
        })
      },
      //关闭分享弹窗
      handleClose(show) {
        this.disPopupShow = show
      },
      //客服
      handleChat() {
        const shop_qq = this.$refs.seller.shopInfo.shop_qq
        if (shop_qq) {
          // #ifdef H5
          console.log('H5')
          location.href = "http://wpa.qq.com/msgrd?v=3&uin=" + shop_qq + "&site=qq&menu=yes"
          // #endif
          // #ifdef APP-PLUS
          console.log('APP')
          plus.runtime.openURL("mqq://im/chat?chat_type=wpa&uin=" + shop_qq + "&version=1&src_type=web");
          // #endif
        } else {
          this.$u.toast('该店铺未设置客服账号')
        }
      },
      //跳转至购物车
      handleCart() {
        uni.navigateTo({
          url: '/pages/tabs/cart/cart'
        })
      },
      //规格弹窗显示关闭
      handleskuPopup(show) {
        this.skuPopupShow = show
      },
      //购买数量
      handleBuyNum(num) {
        this.buyNum = num
      },
      //加入购物车
      handleAddToCart() {
        if (this.goods.enable_quantity <= 0) return this.$u.toast('当前产品已售完')
        //如果已下架
        if (this.goods.market_enable === 0) {
          return;
        }
        this.judgeLogin(() => {
          const {
            buyNum
          } = this
          const {
            sku_id
          } = this.selectedSku
          API_Trade.addToCart(sku_id, buyNum, this.getActivityId(), this.selectedPromotionType).then(response => {
            this.$u.toast('已加入购物车')
            //更新购物车数量
            this.getAllCount()
            this.skuPopupShow = false
            uni.$emit('refresh', {
              msg: '监听登录，刷新购物车'
            })
          });
        })
      },
      //立即购买
      handleBuyNow() {
        if (this.goods.enable_quantity <= 0) return this.$u.toast('当前产品已售完')
        //如果已下架
        if (this.goods.market_enable === 0) {
          return;
        }
        this.judgeLogin(() => {
          const {
            buyNum
          } = this
          const {
            sku_id
          } = this.selectedSku
          API_Trade.buyNow(sku_id, buyNum, this.getActivityId(), this.selectedPromotionType).then(response => {
            this.skuPopupShow = false
            this.$u.route({
              url: '/pages/checkout/checkout',
              params: {
                way: 'BUY_NOW'
              }
            })
          })
        })
      },
      /**
       * 拼团购买
       */
      handleAssembleBuyNow() {
        this.judgeLogin(() => {
          const {
            buyNum
          } = this
          const {
            sku_id
          } = this.selectedSku
          API_Trade.addToAssembleCart(sku_id, buyNum).then(response => {
            this.skuPopupShow = false
            this.$u.route({
              url: '/pages/checkout/checkout',
              params: {
                from_nav: 'assemble'
              }
            })
          })
        })
      },
      /**
       * 参与拼团
       * @param {Object} order  拼团订单信息
       */
      toAssembleBuyNow(order) {
        this.judgeLogin(() => {
          const {
            buyNum
          } = this
          const {
            sku_id
          } = this.selectedSku
          API_Trade.addToAssembleCart(sku_id, buyNum).then(response => {
            this.skuPopupShow = false
            this.$u.route({
              url: '/pages/checkout/checkout',
              params: {
                from_nav: 'assemble',
                assembleOrderId: order.order_id
              }
            })
          })
        })
      },
      /** 检查是否有代金券兑换、团购、限时抢购活动 */
      getActivityId() {
        const {
          promotions
        } = this
        if (!promotions || !promotions.length) return ''
        let pro
        for (let i = 0; i < promotions.length; i++) {
          let item = promotions[i]
          if (item.exchange || item.groupbuy_goods_vo || item.seckill_goods_vo || item.minus_vo || item.half_price_vo) {
            pro = item
            break
          }
        }
        if (!pro) return ''
        this.selectedPromotionType = pro.promotion_type
        return pro.activity_id
      },
      // 获取商品收藏
      getGoodsIsCollect() {
        API_Members.getGoodsIsCollect(this.goods_id).then(response => {
          this.collected = response.message
        })
      },
      //收藏
      handleCollect() {
        this.judgeLogin(() => {
          if (this.collected) {
            API_Collection.deleteGoodsCollection(this.goods_id).then(() => {
              this.collected = false
              uni.showToast({
                title: '取消成功'
              })
            })
          } else {
            API_Collection.collectionGoods(this.goods_id).then(() => {
              this.collected = true
              uni.showToast({
                title: '收藏成功'
              })
            })
          }
        })
      },
      //图片预览
      handlePreviewImage(index, image) {
        const urls = []
        this.gallery_list.forEach(item => {
          urls.push(item.image)
        })
        uni.previewImage({
          current: index,
          urls: urls
        })
      },

      //获取商品促销
      getGoodsPromotions() {
        API_Promotions.getGoodsPromotions(this.goods_id).then(response => {
          this.promotions = response
        })
      },
      //获取购物车数量
      getAllCount() {
        let _allCount = 0
        API_Trade.getCarts().then(res => {
          const {
            cart_list
          } = res
          cart_list.forEach(shop => {
            shop.sku_list.forEach(item => {
              if (item.invalid !== 1) {
                _allCount += item.num
              }
              this.cartGoodsCount = _allCount
            })
          })
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  /deep/ .goods-container {
    margin-bottom: 150rpx;

    .collection-text {
      color: #747474;
    }

    .comment-btn {
      padding: 12rpx 50rpx;
      border: 2rpx solid #A6A6A6;
      border-radius: 70rpx;
    }

    .u-divider {
      height: 80rpx !important;
    }

    .u-th,
    .u-td {
      padding: 20rpx 30rpx !important;
      background-color: #FFFFFF;
    }

    .u-td {
      font-size: 24rpx !important;
      color: #8E8E8E !important;
    }

    .u-tag {
      padding: 8rpx !important;
      font-size: 20rpx;
      margin-right: 2rpx;
    }

    .params-left {
      .u-td {
        color: #989898 !important;
      }
    }
  }

  //商品基本信息
  .goods-base-view {
    padding: 20rpx 20rpx 30rpx 20rpx;
    border-radius: 5px 5px 0 0;
    background-color: #FFFFFF;

    .base-price-view {
      // display: flex;
      // flex-direction: row;
      // align-items: flex-end;
      // justify-content: space-between;
    }

    .collection-icon-selected {
      color: #FF0000;
    }

    .goods-title {
      width: 90%;
      margin-top: -10rpx;
      // background: skyblue;
      font-size: 32rpx;
      font-weight: bold;
    }
  }

  //补贴额度 促销
  .discounts-view {
    border-radius: 15rpx;
    margin-top: 23rpx;
    overflow: hidden;
  }

  //加粗字体
  .bold-text {
    font-weight: bold;
  }

  //底部按钮
  .navigation {
    position: fixed;
    z-index: 99;
    bottom: 0px;
    left: 0px;
    display: flex;
    justify-content: space-between;
    margin-top: 100rpx;
    border: solid 2rpx #f2f2f2;
    background-color: #ffffff;
    padding: 20rpx 0;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 60rpx;

    .left-view {
      display: flex;
      font-size: 20rpx;

      .item {
        margin: 0 30rpx;

        &.car {
          text-align: center;
          position: relative;

          .car-num {
            position: absolute;
            top: -10rpx;
            right: -10rpx;
          }
        }
      }

      /deep/ {
        button {
          background-color: #FFFFFF;
          font-size: 20rpx;
          line-height: 1.2;

          &::after {
            border: none;
          }
        }
      }
    }
  }

  //加入购物车、立即购买按钮
  .navigation .right-view {
    font-size: 28rpx;
    color: #ffffff;
    margin: 0 20rpx;

    .btn {
      line-height: 80rpx;
      padding: 0 30rpx;
      text-align: center;
    }

    .cart {
      border-top-left-radius: 40rpx;
      border-bottom-left-radius: 40rpx;
      background: linear-gradient(to right, #FFCA1E 0%, #FF8B18 100%);
    }

    .buy {
      border-top-right-radius: 40rpx;
      border-bottom-right-radius: 40rpx;
      background: linear-gradient(to right, #FD5632 0%, #EF0D25 100%);
    }

    .alone-buy {
      display: flex;
      flex-direction: column;
      line-height: 40rpx;
      border-top-left-radius: 40rpx;
      border-bottom-left-radius: 40rpx;
      background: linear-gradient(to right, #FFCA1E 0%, #FF8B18 100%);
    }

    .assemble-buy {
      display: flex;
      flex-direction: column;
      line-height: 40rpx;
      border-top-right-radius: 40rpx;
      border-bottom-right-radius: 40rpx;
      background: linear-gradient(to right, #FD5632 0%, #EF0D25 100%);
    }

    .disable {
      color: #FF8B18;
    }
  }

  .safe-view {
    height: 280rpx;
  }

  /deep/.u-size-mini {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
    width: auto;
    font-size: 12px;
    padding-top: 1px;
    height: 27px;
    line-height: 27px;
    padding: 0 11px;
    margin-bottom: 7px;
  }

  .mktprice {
    color: #666;
    text-decoration: line-through;
    margin-left: 20rpx;
  }

  .header_image {
    margin-top: -170rpx;
    width: 100%;
  }

  .goods-base-view {
    background: url(/static/images/goods/title_bg.png) no-repeat 0 0;
    background-size: cover !important;
    border-radius: 0 !important;
    background-color: #fff;
  }

  .goods-container2 {
    padding: 0 30rpx;
  }

  /deep/ .goods-container {
    margin-top: -140rpx;
  }

  .price_box {
    width: 100%;
    height: 68rpx;
    line-height: 68rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
    background: url(/static/images/goods/price_bg.png) no-repeat 0 0;
    background-size: cover;
  }
</style>